<template>
    <div>

       <van-search
       v-model="value"
       show-action
       label="上海:"
       placeholder="请输入搜索关键词"
       @search="onSearch"
       class="search"
>      <template #action>
       <van-icon name="location" :style="{fontSize:'25px'}" @click="click1" />
       </template>
       </van-search>

       
       
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="../assets/1.png" alt=""></van-swipe-item>
        <van-swipe-item><img src="../assets/2.png" alt=""></van-swipe-item>
        <van-swipe-item><img src="../assets/3.png" alt=""></van-swipe-item>
        </van-swipe>
        



        
     <p>首页</p>
      <van-grid :column-num="4" gutter='12px'>
      <van-grid-item  icon="wap-home-o" text="整租" @click="click1"/>
      <van-grid-item  icon="friends-o" text="合租" @click="click2"/>
      <van-grid-item  icon="location-o" text="地图找房" @click="click3"/>
      <van-grid-item  icon="home-o" text="去出租" @click="click4"/>
      </van-grid>





      <p>租房小组</p>
       <van-grid direction="horizontal" :column-num="2" gutter='12px' >
  <van-grid-item  text="家住回龙观，归属的感觉" />
  <van-grid-item  text="家住回龙观，归属的感觉" />
  <van-grid-item  text="家住回龙观，归属的感觉" />
  <van-grid-item  text="家住回龙观，归属的感觉" />
</van-grid>

    </div>
</template>

<script>

export default {
    name: 'VuecliDemo1',

    data() {
        return {
          value: '',
          label:'',

           value1: 0,
           option1: [
        { text: '上海', value: 0 },
        { text: '杭州', value: 1 },
        { text: '厦门', value: 2 },
      ],
        };
    },

  created(){
 
  },

    mounted() {
        
    },

    methods: {
    click1(){
        this.$router.push({ 
         path:'/layout/zhaofang', 
          }) 
    },
      click2(){
         this.$router.push({ 
         path:'/layout/zhaofang', 
          }) 
    },
     click3(){
         this.$router.push({ 
         path:'/layout/zhaofang', 
          }) 
    },
     click4(){
         this.$router.push({ 
         path:'/quchuzu', 
          }) 
    },

     onSearch(){
        alert('1')
     }
    },




};
</script>

<style lang="less" scoped>
  .search{
   position: absolute;
   z-index: 1111111;
  
   height: 35px;
   width: 375px;
   top: 10px;
  }

// 轮播图
 .my-swipe .van-swipe-item {
    position: relative;
    color: #fff;
    font-size: 20px;
    height: 212px;
    line-height: 212px;
    text-align: center;
    background-color: #39a9ed;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
  };






</style>